<template>
    <div class="info-content">
      <div class="form-block">
        <div class="form-info">
          <div class="title">手机号码</div>
          <div class="form-item">
            <input v-model="user.mobile" class="form-ctrl phone" maxlength="11" type="text" placeholder="请输入你的手机号" disabled/>
          </div>
        </div>
        <div class="form-info">
          <div class="title">验证码</div>
          <div class="form-item">
            <input v-model="form.mobileCode" class="form-ctrl code" maxlength="6" type="text" placeholder="请输入验证码"/>
            <div class="get-code" v-loading="sendCodeLoading" @click="sendAuthCode">{{ btnText }}</div>
          </div>
        </div>
        <div class="form-info">
          <div class="title">新密码</div>
          <div class="form-item">
            <input v-model="form.passWord" class="form-ctrl phone" maxlength="11" type="password" placeholder="8-16位字母、数字、字符，不支持空格"/>
          </div>
        </div>
        <div class="form-info">
          <div class="title"></div>
          <div class="form-item">
            <input v-model="form.affirm" class="form-ctrl phone" maxlength="11" type="password" placeholder="请确认您的密码"/>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import {sendMessageCodeApi, UpdatePassWordApi} from "@/api/user";
import {validate} from "@/utils/validate";
import {mapGetters} from "vuex";
export default {
  name: "change-password",
  data(){
    return{
      sendCodeLoading:false,
      btnText: "获取验证码",
      seconds: 0,
      countDown:null,
      form:{
        mobileCode:'',
        affirm:'',
        passWord:''
      },
      rules: {
        mobileCode: {
          name: '短信验证码',
          required: true,
          validator: function (value, form, callback) {
            if (value.length !== 6) {
              callback('请输入正确的短信验证码');
            }
            callback();
          }
        },
        passWord: {
          name: '密码',
          required: true,
          validator: function (value, form, callback) {
            if (value.length < 8) {
              callback('密码不能小于8位');
            }
            callback();
          }
        },
        affirm: {
          name: '密码',
          required: true
        }
      },

    }
  },
  methods: {
    //发送验证码
    sendAuthCode()
    {
      if (this.seconds === 0) {
        this.sendCodeLoading = true
        sendMessageCodeApi({mobile: this.user.mobile, type: 1}).then(() => {
          this.$message.success('发送成功！');
          this.setCountDown(60)
        }).finally(() => {
          this.sendCodeLoading = false;
        })
      }
    },
    setCountDown(seconds)
    {
      this.countDown = setInterval(() => {
        seconds = seconds > 0 ? seconds - 1 : seconds;
        this.btnText = seconds > 0 ? `重新获取(${seconds}s)` : '获取验证码';
        this.seconds = seconds;
        if (seconds === 0) {
          clearInterval(this.countDown);
        }
      }, 1000)
    },
    submit(){
      if(validate(this.form,this.rules)){
        if(this.form.affirm!==this.form.passWord){
          this.$message.error('密码不一致！');
          return;
        }
        const loading=this.$loading({text:'提交中'});
        UpdatePassWordApi(this.form).then((res)=>{
          console.log(res)
          if(res==406){
            this.$message.error('验证码错误');
            return;
          }
          this.$message.success('修改成功');
        }).finally(()=>{
          loading.close()
        })
      }
    }
  },
  computed: {
    ...mapGetters(['user', 'identity'])
  }
}
</script>

<style scoped lang="scss">
  .info-content{
    display: flex;
    flex-direction: column;


    .form-block{
      width: 100%;
      .form-info{
        display: flex;
        align-items: center;
        .title{
          width: 80px;
          font-size: 16px;
          display: flex;
          justify-content: flex-end;
          margin-right: 20px;
          margin-top: 30px;
        }
        .form-item {
          margin-top: 30px;
          width: 310px;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-radius: 30px;
          background: $lightGray;

          .form-ctrl {
            width: 100%;
            height: 40px;
            padding: 0 20px;
            background: none;
          }

          .form-ctrl.code {
            width: calc(100% - 90px);
          }

          .get-code {
            width: 100px;
            font-size: 13px;
            color: $orange;
            border-left: 1px solid $midGray;
            padding-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }

</style>
